<template>
  <view>
    <uni-section>
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="items" :style-type="styleType"
                                @clickItem="onClickItem" />
      </view>
      <view class="content">
        <view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
        <view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
        <view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
      </view>
    </uni-section>

  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      items: ['未使用', '已使用', '已使用'],
      styles: [{
        value: 'text',
        text: '文字',
        checked: true
      }],
      current: 0,
      styleType: 'text'
    }
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },
    // styleChange(e) {
    //   if (this.styleType !== e.detail.value) {
    //     this.styleType = e.detail.value
    //   }
    // },
    // colorChange(e) {
    //   if (this.styleType !== e.detail.value) {
    //     console.log(e.detail.value);
    //     this.activeColor = e.detail.value
    //   }
    // }
  }
}
</script>

<style lang="scss">
//.example-body {
//  /* #ifndef APP-NVUE */
//  display: flex;
//  /* #endif */
//  flex-direction: row;
//  padding: 0;
//}

//.uni-common-mt {
//  margin-top: 30px;
//}

//.uni-padding-wrap {
//  // width: 750rpx;
//  padding: 0px 30px;
//}

.content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
  height: 150px;
  text-align: center;
}

.content-text {
  font-size: 14px;
  color: #666;
}

//.color-tag {
//  width: 25px;
//  height: 25px;
//}

//.uni-list {
//  flex: 1;
//}
//
//.uni-list-item {
//  /* #ifndef APP-NVUE */
//  display: flex;
//  /* #endif */
//  flex: 1;
//  flex-direction: row;
//  background-color: #FFFFFF;
//}
//
//
//.uni-list-item__container {
//  padding: 12px 15px;
//  width: 100%;
//  flex: 1;
//  position: relative;
//  /* #ifndef APP-NVUE */
//  display: flex;
//  box-sizing: border-box;
//  /* #endif */
//  flex-direction: row;
//  justify-content: space-between;
//  align-items: center;
//  border-bottom-style: solid;
//  border-bottom-width: 1px;
//  border-bottom-color: #eee;
//}
//
//.uni-list-item__content-title {
//  font-size: 14px;
//}
</style>

